Building Read-only Mobile Applications |
|
You can build Read-only mobile applications on Process Platform Web services using the cordys.model plug-in in the Process Platform HTML5 SDK. For information on getting started, refer to Getting Started with the SDK.
This plug-in uses KnockoutJS for rendering, which can be used for building transactional Web pages as well. For more information, refer to Building Transactional Mobile Applications . If you are new to KnockoutJS, one of the best places to start is the Knockout Tutorial. You can also use the other rendering libraries such as jsRender to build the read-only model. For more information on using jsRender as the rendering library, refer to Retrieving the Data .
Both the examples described in this topic are read-only. The following examples have been described in this topic:
- Example 1: (Read-only list of employees) - Displays a list of the employees from the Northwind Database
- Example 2: (Read-only list of employees with details) - Displays the details of each employee on clicking the items in the list
Example 1
This example displays the list of employees with their Photograph, First Name, Last Name, Address, and City. This list is not editable. This example is similar to employeeslist.htm in the demo folder in the Process Platform HTML5 SDK. For more information on other Demo pages shipped with the SDK, refer to Sample Pages.
Read-only list of employees
<html>
<head>
<title>Employees</title>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<link href="/cordys/thirdparty/jquery/jquery.mobile.min.css" rel="stylesheet"/>
<script src="/cordys/thirdparty/jquery/jquery.js" type="text/javascript"/>
<script src="/cordys/thirdparty/jquery/jquery.mobile.min.js" type="text/javascript"/>
<script src="/cordys/thirdparty/knockout/knockout.js" type="text/javascript"/>
<script src="/cordys/html5/cordys.html5sdk.js" type="text/javascript"/>
<script type="text/javascript"> $(function() { // Create a new model empModel = new $.cordys.model({ objectName: "Employees", // Name of the Business Object context : $("#employeeList")[0], // Where the data has to be bound read: { // Settings for the read method namespace: "http://schemas.cordys.com/NW", dataType: "json", method: "GetEmployeesObjects", // Parameters for the method parameters: { fromEmployeeID: "0", toEmployeeID: "99" } } }); // Call the read method. This would fire the method with the namespace and parameters as specified in the read settings above. empModel.read(); }); </script>
</head>
<body>
<div data-role="page" id="mainPage">
<div data-role="header" data-theme="b">
<h1>Employees</h1>
</div>
<div data-role="content" data-theme="b">
<ul data-bind="foreach:Employees" data-inset="true"
data-role="listview" data-theme="c" id="employeeList">
<li>
<!-- ko if: typeof(Photo)!=="undefined" && Photo-->
<img class="ui-li-thumb ui-corner-tl" data-bind="attr: {src: 'data:image/bmp;base64,' + Photo.substring(104) }"/>
<!-- /ko -->
<!-- ko if: typeof(Photo)==="undefined" || (!Photo)-->
<img class="ui-li-thumb ui-corner-tl" src="/cordys/html5/demo/images/defaultphoto.jpg"/>
<!-- /ko -->
<h3 class="ui-li-heading">
<span data-bind="text:FirstName"/>
<span data-bind="text:LastName"/>
</h3>
<p class="ui-li-desc" data-bind="text:Address"/>
<p class="ui-li-desc">
<span data-bind="text:City"/>
<span data-bind="text:Country"/>
</p>
</li>
</ul>
</div>
</div>
</body>
</html>
Example 2
You can customize the Example 1 by adding a click event for the employees list. The details of the selected Employee are displayed in the detail view, which is not editable. The example here is similar to employeeswithdetails.htm in the demo folder in the Process Platform HTML5 SDK.
Read-only list of employees with details
<!DOCTYPE html> <html> <head> <title>Employees</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" href="/cordys/thirdparty/jquery/jquery.mobile.min.css" /> <script src="/cordys/thirdparty/jquery/jquery.js" type="text/javascript"></script> <script src="/cordys/thirdparty/jquery/jquery.mobile.min.js" type="text/javascript"></script> <script src="/cordys/thirdparty/knockout/knockout.js" type="text/javascript"></script> <script src="/cordys/html5/cordys.html5sdk.js" type="text/javascript"></script> <script type="text/javascript"> var empModel; // Reference to the model $(function() { ko.bindingHandlers.photo = { update: function(element, valueAccessor) { var value = valueAccessor(); if (value) { element.src = 'data:image/bmp;base64,' + value.substring(104); } else { element.src="/cordys/html5/demo/images/defaultphoto.jpg"; } } }; // Create a new model empModel = new $.cordys.model({ objectName: "Employees", // Name of the Business Object context : document.body, // Where the data has to be bound to read: { // Settings for the read method namespace: "http://schemas.cordys.com/NW", dataType: "json", method: "GetEmployeesObjects", // Parameters for the method parameters: { fromEmployeeID: "0", toEmployeeID: "99" } } }); // Call the read method. This would fire the method with the namespace and parameters as specified in the read settings above. empModel.read(); }); // Called on clicking an Employee function selectEmployee(emp) { return function(data) { // Let us set the currently clicked item as the selected item to show in the detail page empModel.selectedItem(data); return true; } } </script> </head> <body> <div data-role="page" id="mainPage"> <div data-role="header" data-theme="b"> <h1>Employees</h1> </div> <div data-role="content" data-theme="b"> <ul id="employeeList" data-role="listview" data-theme="c" data-inset="true" data-bind="foreach:Employees"> <li> <a href="#detailsPage" data-transition="pop" class="ui-link-inherit" data-bind="click:selectEmployee($data)"> <img class="ui-li-thumb ui-corner-tl" data-bind="photo:Photo"/> <h3 class="ui-li-heading"><span data-bind="text:FirstName"> <span data-bind="text:LastName"></h3> <p class="ui-li-desc" data-bind="text:Address"></p> <p class="ui-li-desc"><span data-bind="text:City"> <span data-bind="text:Country"></p> </a> </li> </ul> </div> </div> <div data-role="page" id="detailsPage"> <div data-role="header" data-theme="b"> <a href="#mainPage" data-role="button" data-icon="back" data-rel="back">Back</a> <h1>Employee Details</h1> </div> <div data-role="content" data-theme="c"> <ul data-role="listview" id="detailView"> <li> <div data-bind="with: selectedItem"> <a class="ui-link-inherit"> <img class="ui-li-thumb ui-corner-tl" data-bind="photo:Photo"/> <h2 class="ui-li-heading" data-bind="text:EmployeeID"></h2> <h3 class="ui-li-heading"><span data-bind="text:TitleOfCourtesy"> <span data-bind="text:FirstName"> <span data-bind="text:LastName"></h3> <p class="ui-li-desc"><span data-bind="text:Title"></p> </a> </div> </li> <li data-role="fieldcontain"> <div data-bind="with: selectedItem" id="employeeDiv"> <div> <label for="fldTitleOfCourtesy" class="select">Title of Courtesy</label> <select id="fldTitleOfCourtesy" data-bind="value:TitleOfCourtesy" data-native-menu="true" data-mini="true" data-theme="c" data-inline="true"> <option value="Mr.">Mr.</option> <option value="Mrs.">Mrs.</option> <option value="Ms.">Ms.</option> <option value="Dr.">Dr.</option> </select> </div> <div > <label for="fldFirstName" class="ui-input-text">First Name</label> <input type="text" id="fldFirstName" data-bind="value:FirstName" class="ui-input-text ui-body-b ui-corner-all ui-shadow-inset"/> </div> <div> <label for="fldLastPhone" class="ui-input-text">Last Name</label> <input type="text" id="fldLastName" data-bind="value:LastName" class="ui-input-text ui-body-b ui-corner-all ui-shadow-inset"/> </div> <div > <label for="fldTitle" class="ui-input-text">Title</label> <input type="text" id="fldTitle" data-bind="value:Title" class="ui-input-text ui-body-b ui-corner-all ui-shadow-inset"/> </div> <div > <label for="fldPhone" class="ui-input-text">Phone</label> <input type="text" id="fldPhone" data-bind="value:HomePhone" class="ui-input-text ui-body-b ui-corner-all ui-shadow-inset"/> </div> <div > <label for="fldAddress" class="ui-input-text">Address</label> <input type="text" id="fldAddress" data-bind="value:Address" class="ui-input-text ui-body-b ui-corner-all ui-shadow-inset"/> </div> <div > <label for="fldCity" class="ui-input-text">City</label> <input type="text" id="fldCity" data-bind="value:City" class="ui-input-text ui-body-b ui-corner-all ui-shadow-inset"/> </div> <div > <label for="fldCountry" class="ui-input-text">Country</label> <input type="text" id="fldCountry" data-bind="value:Country" class="ui-input-text ui-body-b ui-corner-all ui-shadow-inset"/> </div> <div > <label for="fldNotes" class="ui-input-text">Notes</label> <textarea id="fldNotes" data-bind="value:Notes" class="ui-input-text ui-body-b ui-corner-all ui-shadow-inset"></textarea> </div> </div> </li> </ul> </div> </div> </body> </html>